<template>
  <div class="common-details">
    <customDetailsTopbar :title="$route.query.tag + '详情'" flag @back="back" />
    <div class="d-scroll listInner px-1">
      <div class="py-1 px-1 bg-white loading">
        <div v-for="(item, index) in descList" :key="index">
          <customTitle v-if="item.label" :is-line="true" bg-color="#3795ff" :title="item.label" />
          <div>
            <div v-if="item.label === 'CCER项目备案管理'">
              <div v-if="listData.length!=0">
                <el-table :data="listData" style="width: 100%" size="small" class="tableList mt-1 ">
                  <el-table-column prop="type" label="材料名称" align="center" show-overflow-tooltip />
                  <el-table-column prop="uploadTime" label="上传时间" align="center" min-width="130" />
                  <el-table-column label="操作" align="center" width="60">
                    <template slot-scope="{ row }">
                      <el-link
                        type="primary"
                        @click="openAttachPopUp([{
                          'fileId': '',
                          'fileName': row.name||'暂无数据',
                          'fileUrl': row.uuid,
                          'fileUuid': ''
                        }])"
                      >查看</el-link>
                      <!-- <el-link type="primary" @click="handleDownLoad(row.uuid)">{{ row.name }}</el-link> -->
                    </template>
                  </el-table-column>
                </el-table>
              </div>

              <!-- <span v-else>暂无数据</span>  -->
              <el-empty v-else description="暂无数据" />
              <!-- <div v-if="it.uuid" class="detailItem">
                  <el-link type="primary" @click="handleDownLoad(it.uuid)">{{ it.value }}</el-link>
                  <span>{{ it.time }}</span>
                </div> -->
            </div>
            <div v-for="(it, ind) in item.value" :key="ind" else class="">

              <custom-details-item :icon="it.icon" :label="it.label" :value="it.value">
                <template #valueSlot>
                  <el-link
                    v-if="it.label === '项目合同'"
                    type="primary"
                    @click="openAttachPopUp([{
                      'fileId': '',
                      'fileName': it.value||'暂无数据',
                      'fileUrl': it.uuid,
                      'fileUuid': ''
                    }])"
                  >查看</el-link>
                  <!-- <el-link v-if="it.label === '项目合同'" type="primary" @click="handleDownLoad(it.uuid)">{{ it.value }}</el-link> -->
                  <span v-else>{{ it.value }}</span>
                </template>
              </custom-details-item>
            </div>
          </div>
        </div>
      </div>
    </div>
    <attachPopUp ref="attachPopUp" />
  </div>
</template>

<script>
import commonList from '@/assets/mixin/commonList'
import { ccerRecordProjectView } from '@/api/carbon'
export default {
  mixins: [commonList],
  data() {
    return {
      descList: [],
      listData: [],
      descListMap: {
        CCER备案项目: [
          {
            label: '基本信息',
            value: [
              { field: 'ccerProjectName', label: 'CCER项目名称', value: '', icon: '' },
              { field: 'ccerProjectCode', label: 'CCER项目编号', value: '', icon: '' },
              { field: 'companyName', label: '企业名称', value: '', icon: '' },
              { field: 'projectType', label: '项目类型', value: '', icon: '' },
              { field: 'budgetEmissionReduction', label: '预计年减排量（吨二氧化碳当量）', value: '', icon: '' },
              { field: 'validity', label: '截至有效期', value: '', icon: '' },
              { field: 'recordApplicationTime', label: '备案申请时间', value: '', icon: '' },
              { field: 'recordPassTime', label: '备案通过时间', value: '', icon: '' },
              { field: 'contractSignTime', label: '合同签订日期', value: '', icon: '' },
              { field: 'projectProgress', label: '项目进度', value: '', icon: '' }
            ]
          },
          {
            label: 'CCER项目备案管理'
            // value: [
            //   { isFile: true, field: 'type', label: '', value: '项目备案申请函和申请表', time: '' },
            //   { isFile: true, field: 'uploadTime', label: '', value: '项目情况说明', time: '' }
            // ]
          }

        ],
        CCUS项目: [
          {
            label: '',
            value: [
              { field: 'ccusProjectName', label: 'CCUS项目名称', value: '', icon: '' },
              { field: 'companyName', label: '企业名称', value: '', icon: '' },
              { field: 'industry', label: '行业类别', value: '', icon: '' },
              { field: 'budget', label: '预算（万元）', value: '', icon: '' },
              { field: 'carbonCaptureCapacity', label: '二氧化碳捕集能力（吨二氧化碳当量/年）', value: '', icon: '' },
              { field: 'captureVolume', label: '捕集量（吨）', value: '', icon: '' },
              { field: 'startTime', label: '开始日期', value: '', icon: '' },
              { field: 'projectProgress', label: '项目进度', value: '', icon: '' },
              { isFile: true, field: 'attachName', label: '项目合同', value: '', icon: '' }
            ]
          }
        ]
      }
    }
  },
  async mounted() {
    this.layout.showAreaLoading(['.loading '])
    this.descList = this.descListMap[this.$route.query.tag]
    let data = {}

    if (this.$route.query.tag === 'CCUS项目') {
      data = JSON.parse(this.$route.query.data)
    } else if (this.$route.query.tag === 'CCER备案项目') {
      const { status, data: resData } = await ccerRecordProjectView({ id: this.$route.query.data })
      if (status === 0 && resData) {
        data = resData
        this.listData = resData.attachmentVOList
      }
    }

    if (data) {
      this.descList.forEach((desc) => {
        if (desc.label !== 'CCER项目备案管理') {
          desc.value.forEach((v) => {
            v.value = data[v.field] ? data[v.field] + '' : v.value

            if (v.isFile) {
              v.uuid = data[v.field.replaceAll('Name', 'Uuid')]
              v.time = data[v.field.replaceAll('Name', 'Time')]
            }
          })
        }
      })
      this.layout.hideAreaLoading(['.loading '])
    }
  },
  methods: {
    back() {
      this.$router.replace({
        path: '/staging/carbonSink',
        query: { current: this.$route.query.current, tag: this.$route.query.tag }

      })
      // this.$router.back()
    }
  }
}
</script>

<style scoped lang="scss">
.detailItem {
  width: 100%;
  min-height: 0.82667rem;
  background-color: #e4e8ef7a;
  border-radius: 0.05333rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin: 0.10667rem 0;
  flex-wrap: nowrap;
  padding-left: 0.2rem;
  span {
    margin-left: 20px;
  }
}
</style>
